<template>
    <div>
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <el-row :gutter="10">
          <el-col :span="10">

            <!--input输入-->
            <el-form-item label="姓名" prop="userName" label-width="100px">
              <el-input
                clearable
                placeholder="请输入姓名"
                v-model.trim="formData.userName"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" label-width="100px">
              <el-input
                clearable
                placeholder="请输入手机号"
                v-model.trim="formData.phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="position" label-width="100px">
              <el-input
                disabled
                v-model.trim="formData.position"
              ></el-input>
            </el-form-item>

            <el-form-item label="角色类型"  label-width="100px"  >
                <el-input  disabled v-model="formData.roleNames" >
                </el-input>


            </el-form-item>
            <el-form-item label="创建时间" prop="email" label-width="100px">
              <el-input
                clearable
                disabled
                v-model.trim="formData.createTime"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码" label-width="100px">
              <a
                href="javascript:void(0)"
                class="a-link"
                @click="showUpdatePassword"
                >修改密码</a
              >
            </el-form-item>
            <el-form-item label-width="100px">
              <el-button
                style="width: 50%"
                class="submit-btn"
                type="danger"
                @click="savaMyInf"
                >保存</el-button
              >
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <div ref="chart4ScoreInfoRef" style="width: 100%;height: 60vh"></div>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <UpdatePwd ref="updateMyPwdRef"></UpdatePwd>
  </template>

  <script setup>
import * as echarts from "echarts";
  import UpdatePwd from "../UpdatePwd.vue";
  import { ref, reactive, getCurrentInstance, nextTick,shallowRef } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    getUserInfo: "/loadMyInfo",
    savaMyInf: "/saveMyInfo",
    loadMyScoreInfo: "/score/loadMyScoreInfo",
  };

  const formData = ref({});
  const formDataRef = ref();

  const rules = {
    phone: [{ required: true, message: "请输入手机号" },
      {
        validator:proxy.Verify.phone,
        message:"请输入正确的手机号",
      }
    ],
    userName:[{ required: true, message: "请输入昵称" }]
  };

  const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));


  //获取用户信息
  const getUserInfo = async () => {
    let result = await proxy.Request({
      url: api.getUserInfo,
      params: {},
    });
    if (!result) {
      return;
    }
    formData.value = result.data;
    if(userInfo.superAdmin){
      formData.value.roleNames="超级管理员"
    }
  };

nextTick(()=>{
  getUserInfo();
  loadMyScoreInfo();
})



  //保存个人信息

  const savaMyInf = () => {
    console.log("点击提交")
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      let result = await proxy.Request({
        url: api.savaMyInf,
        params:{
          userName:formData.value.userName,
          phone:formData.value.phone,
        }
      });
      if (!result) {
        return;
      }
      proxy.Message.success("保存成功");
    });
  };


  //修改密码
  const updateMyPwdRef=ref();
  const showUpdatePassword=()=>{
    updateMyPwdRef.value.show("updateMyPwd",{});
  }



const getOption = (title, legendData = [],indicatorData=[],seriesData = []) => {
  return {
    title: {
      text: title,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "red",
        },
      },
    },
    legend: {
      data:legendData,
    },
    radar: {
    // shape: 'circle',
    indicator: indicatorData,
  },
    series: seriesData,
  };
};

let title="";

let legendData= ['Allocated Budget', 'Actual Spending']

let indicatorData= [
      { name: '临场应变评分', max: 100 },
      { name: '表现评分', max: 100 },
      { name: '沟通交流评分', max: 100 },
      { name: '组织协调评分', max: 100 },

      { name: '技术知识评分', max: 100 },

    ]
let seriesData=[
    {
      name: '',
      type: 'radar',
      data: [
        {
          value: [0, 0, 0, 0, 0, 0],
          name: ''
        },
      ]
    }
  ]

const chart4ScoreInfoRef = ref(null);
const chart4ScoreInfoData = shallowRef();
const initChartScoreInfo=(data)=>{
  if(data!==null){
    seriesData=[
    {
      name: '',
      type: 'radar',
      data: [
        {
          value: [data.adaptabilityScore, data.appearanceScore,data.communicateScore,data.coordinationScore,data.technicalKnowledgeScore],
          name: ''
        },
      ]
    }
  ]
  }
  chart4ScoreInfoData.value=echarts.init(chart4ScoreInfoRef.value);
  chart4ScoreInfoData.value.setOption(
    getOption(title,legendData,indicatorData,seriesData)
  );
}

const loadMyScoreInfo= async()=>{

  let result = await proxy.Request({
      url: api.loadMyScoreInfo,
    });
    if (!result) {
      return;
    }
    let data = result.data;
    initChartScoreInfo(data);
  }


  </script>

  <style lang="scss" scoped>
  </style>

